<template>
  <div class="list">
    <el-card>
      <div class="container-search">
        <el-form ref="form" :inline="true" label-width="130px" :model="form">
          <el-form-item label="预算单号：">
            <el-input v-model="form.DOCNO" />
          </el-form-item>
          <el-form-item label="单据状态：">
            <el-select v-model="form.DOC_STATUS" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.documentsState" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="优先级：">
            <el-select v-model="form.PRIORITY" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.priority" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型：">
            <el-select v-model="form.BUSINESS_TYPE" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.businessType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称：">
            <el-input v-model="form.CUSTOMER_NAME" />
          </el-form-item>
          <el-form-item label="温度类型：">
            <el-select v-model="form.TEMPERATURE_TYPE" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.temperatureType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="场地规模：">
            <el-select v-model="form.PLACE_SCALE" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.fieldScale" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="建设类型：">
            <el-select v-model="form.CONSTRUCTION_TYPE" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.constructionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="能否实现封闭式：">
            <el-select v-model="form.BE_CLOSED" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.closed" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="配置类型：">
            <el-select v-model="form.CONFIGURATION_TYPE" clearable placeholder="请选择">
              <el-option v-for="item in budgetUnit.configType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">
              <vui-icon icon="refresh-line" />
              重置
            </el-button>
            <el-button type="primary" @click="query">
              <vui-icon icon="search-line" />
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <div class="container-list">
          <div class="btns">
            <el-button type="primary" @click="add">
              <vui-icon icon="add-line" />
              新增预算单
            </el-button>
          </div>
          <el-table border :data="list" highlight-current-row>
            <el-table-column label="序号" type="index" />
            <el-table-column label="预算单号">
              <template #default="{ row }">
                <el-button type="text" @click="toDetails(row)">{{ row.DOCNO }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="优先级" prop="PRIORITY" />
            <el-table-column label="单据状态" prop="DOC_STATUS" />
            <el-table-column label="客户名称" prop="CUSTOMER_NAME" />
            <el-table-column label="业务类型" prop="BUSINESS_TYPE" />
            <el-table-column label="温度类型" prop="TEMPERATURE_TYPE" />
            <el-table-column label="场地规模" prop="PLACE_SCALE" />
            <el-table-column label="场地建设类型" prop="CONSTRUCTION_TYPE" />
            <el-table-column label="能否实现封闭式" prop="BE_CLOSED" />
            <el-table-column label="配置类型" prop="CONFIGURATION_TYPE" />
            <el-table-column label="进度状况">
              <template #default="{ row }">
                <el-button type="text" @click="lookSchedule(row)">查看进度</el-button>
              </template>
            </el-table-column>
            <el-table-column label="创建人员" prop="ADDWHO" />
            <el-table-column label="创建时间" prop="ADDTIME" />
            <el-table-column label="修改人员" prop="EDITWHO" />
            <el-table-column label="修改时间" prop="EDITTIME" />
          </el-table>
        </div>
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" :title="title" width="80%">
      <schedlule-dialog v-if="dialogVisible" :single-end-id="singleEndId" @queryCallback="queryCallback" />
    </el-dialog>
    <el-dialog v-model="uploadVisible" :title="uploadTitle" width="80%" @close="cancel">
      <upload-dialog v-if="uploadVisible" :upload-tag="uploadTag" @cancel="cancel" />
    </el-dialog>
  </div>
</template>

<script>
  // import { defineComponent } from 'vue'
  import SchedluleDialog from '../../components/SchedluleDialog.vue'
  import UploadDialog from '../../components/uploadDialog.vue'
  import budgetUnit from '../../common/options'
  import requestMethod from '../../common/requestMethod'
  import publicFn from '../../common/requestCommon'
  export default {
    name: 'BudgetList',
    components: {
      SchedluleDialog,
      UploadDialog,
    },
    data() {
      return {
        singleEndId: '',
        uploadTag: '预算单头',
        budgetUnit,
        title: '',
        uploadTitle: '新增预算单',
        total: 0,
        size: 0,
        page: 0,
        currentPage: 0,
        tablePage: {
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 9999,
        },
        dialogVisible: false,
        uploadVisible: false,
        list: [],
        form: {},
      }
    },
    created() {},
    methods: {
      queryCallback(time) {
        if (time) {
          let timestamp = new Date().getTime()
          let time_ = timestamp - new Date(time).getTime()
          let titleTime = this.getNowFormatDate(time_)
          this.title = '清单进度汇总情况（截止目前总耗时：' + titleTime + '）'
        } else {
          this.title = '清单进度汇总情况（截止目前总耗时：无）'
        }
      },
      getNowFormatDate(time) {
        let second = parseInt(time / 1000) % 60
        let minute = parseInt(parseInt(time / 1000) / 60) % 60
        let hour = parseInt(parseInt(time / 1000) / 60 / 60) % 60
        return (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
      },
      cancel() {
        this.uploadVisible = false
        this.query()
      },
      add() {
        this.uploadVisible = true
      },
      reset() {
        this.form = {}
        this.query()
      },
      query() {
        let p = {
          ...this.form,
          ...this.tablePage,
        }
        this.getBudget(p)
      },
      toDetails(item) {
        this.$router.push('/1302')
        this.$store.dispatch('bqmsData/setBudgetSheetNum', item.DOCNO)
      },
      lookSchedule(item) {
        this.dialogVisible = true
        this.singleEndId = item.DOCNO
      },
      //查询单头
      async getBudget(p) {
        let res = await publicFn(requestMethod.BUDGET_HEADER, p)
        if (res.code === '00000') {
          this.list = res.data[requestMethod.BUDGET_HEADER].data
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .list {
    width: calc(100% - 40px);
    padding: 20px;
  }
  .container-search {
    margin-top: 20px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .container-list {
    padding: 0 10px;
    box-sizing: border-box;
  }
</style>
